<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pixiJs</title>
    <script type="text/javascript" src="js/pixi.min.js"></script>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body >
<div id="stage"></div>
</body>
<script type="text/javascript">
    // var type = "WebGL";
    //
    // if (!PIXI.utils.isWebGLSupported()) {
    //     type = "canvas";
    // }
    //
    // PIXI.utils.sayHello(type);
    var apph = window.innerHeight;
    var appw = window.innerWidth;
    var app = new PIXI.Application({
        width:appw,
        height:apph,
        backgroundColor:0xffffff
    });
    // app.renderer.backgroundColor = 0xffffff;
    document.getElementById('stage').appendChild(app.view);

    // var stage = new PIXI.Container();
    PIXI.loader.add([
        'img/bg_01.png',
        'img/bg_02.png',
        'img/bg_03.png',
        'img/bg_04.png',
        'img/bg_05.png',
        'img/bg_06.png',
        'img/bg_07.png',
        'img/bg_08.png',
        'img/bg_09.png',
        'img/bg_10.png',
        'img/bg_11.png',
        'img/bg_12.png',
    ])
        .on('progress',loading)
        .load(loaded);
    function loading(loader,resource) {
        // 进度
        console.log(parseInt(loader.progress)+'%');
    }
    function loaded() {
        var n = 0;
        for(var key in PIXI.loader.resources){
            var sprite = new PIXI.Sprite(PIXI.loader.resources[key].texture);
            sprite.position.set(0,n);
            sprite.width = 980;
            sprite.height = 1565;
            n+=1565;
            app.stage.addChild(sprite);
        }
    }
    app.ticker.add(function(delta) {});
</script>
</html>